<template>
    <div id="detail">
          
           <div id='header2'>
              <div class='back'>
                <router-link to="/home">
                  <i class='iconfont'>&#xe640;</i>
                </router-link> 
              </div>
              <span class='title'>商品详情</span>
              <div class='right'>
                <a class="collect tubiao" @click="collect()">
                  <i class='iconfont' v-if="is_collect">&#xe603;</i>
                  <i class='iconfont' v-else>&#xe656;</i>
                <span>收藏</span>
              </a>
                <a class='subnav tubiao' id='subnav'>
                  <i class='iconfont'>&#xe60e;</i>
                  <span>导航</span>
                </a>
        
                <ul class='navList1' id='list'>
          
                  <li>
                    <router-link to="/home">
                      <i class='iconfont'>&#xe6ee;</i>
                      首页
                    </router-link>
                  </li>
                  <li>
                    <router-link to="/mine">
                      <i class='iconfont'>&#xe60f;</i>
                      我的
                    </router-link>
                  </li>
                  <li>
                    <router-link to="/search">
                      <i class='iconfont'>&#xe600;</i>
                      搜索
                    </router-link>
                  </li>
            </ul>
          </div>
        </div>
      
          
         <div id="main">
          <div class="content">
            <div class="head">
            <img :src="'http://127.0.0.1:2000/'+details.img" alt=""/>
              <a class="point"></a>
              <div class="seson"> 
                <h1>{{details.title}}</h1>
                <p>单人自助晚餐</p>
              </div>
            </div> 
            <div class="buy">
              <div class="money">
                <strong>{{details.price}}</strong>
                <span class="yuan">元</span>
                <span class="price">门市价：{{details.old_price}}元</span>
              </div>
              <a href="javascript:;" class="addcart" @click="addcart()">加入购物车</a>
          <div class="rightbuy">
            
            <router-link :to="'/ordercommit/'+details._id">立即购买</router-link>
          </div>
        </div> 
        <div class="group">
          <ul>
            <li>
              <img  />
              <span>{{msg1}}</span>
            </li>
            <li>
              <img  />
              <span>{{msg2}}</span>
            </li>
            <li>
              <img  />
              <span>{{msg3}}</span>
            </li>
          </ul>
        </div>
        <div class="star">
            <span class="left">
            <i class="iconfont icon-shoucang"></i>
            <i class="iconfont icon-shoucang"></i>
            <i class="iconfont icon-shoucang"></i>
            <i class="iconfont icon-shoucang"></i>
            <i clahss="iconfont icon-shoucang"></i>   
            <h>4.6</h>
          </span>
          <span class="right">423人评价></span>
        </div> 
        <div class="pingjia">
          <a href="#">环境优雅65</a>
          <a href="#">服务热情50</a>
          <a href="#">味道赞42</a>
          <a href="#">菜品丰富37</a>
          <a href="#">回头客35</a>
          <a href="#">干净卫生33</a>
          <a href="#">价格实惠29</a>
          <a href="#">肉类号25</a>
          <a href="#">分量足7</a>
          <a href="#">不推荐11</a> 
        </div>
        <div class="infor">商家信息</div> 
        <div class="adress">
          <div class="left">
            <h5>四海一家(益田假日广场店)</h5>
            <div>南山区深南大道9028号华侨城威尼斯酒店...</div>
            <span></span><span>离我最近</span>
          </div>
          <div class="right">
            电话
          </div>
        </div>
      </div>
    </div>
      
    </div>
</template>

<script>


import $ from 'jquery';  //引入jquery
import Storage from './model/storage.js';
    export default {
      name: 'detail',
        data(){
            return{
               details:'',
               msg1:"",
               msg2:"",
               msg3:"",
               userid:"",
               productid:"",
               is_collect:false  //判断有没有收藏
            }
        },
        methods:{
            reqData(id){
                var that=this;
                var url="http://127.0.0.1:2000/api/productcontent?id="+id;
                this.$http.get(url).then(function(res){
                    that.details=res.body.result[0];
                    that.msg1=that.details.description.split("/")[0];
                    that.msg2=that.details.description.split("/")[1];
                    that.msg3=that.details.description.split("/")[2];
                },function(err){
                    console.log(err);
                })
            },

            //收藏的方法
            collect(){

              //收藏的数据
              var newData={
                aid:this.userid,
                bid:this.productid,
                img:this.details.img,
                title:this.details.title,
                price:this.details.price,
                old_price:this.details.old_price
              }


              var collectlist=Storage.get("collectlist");
              
                 //1.获取localstorage的数据   判断有没有数据
                 if(collectlist){ //如果localStorage，再判断是否有当前的数据
                    if(Storage.hasCollectData(this.userid,this.productid,collectlist)){  
                        var list=Storage.deleteCollectData(this.userid,this.productid,collectlist); //存在则删除
                        Storage.set("collectlist",list);  //重新载入
                        this.is_collect=false;
                    }
                    else{
                        this.is_collect=true;  //不存在则收藏并写入localstorage中
                        collectlist.push(newData);
                        Storage.set("collectlist",collectlist);  //重新写入
                    }
                 }
                 else{  //还没有收藏过任何商品
                        var list=[];
                        list.push(newData);
                        Storage.set("collectlist",list);
                        this.is_collect=true;   //没有收藏过则为收藏
                }
                console.log(Storage.get("collectlist"));
            },

            addcart(){  //  加入购物车的方法

               //加入购物车的数据
              var newData={
                aid:this.userid,
                bid:this.productid,
                img:this.details.img,
                title:this.details.title,
                price:this.details.price,
                old_price:this.details.old_price
              }

                var cartlist=Storage.get("cartlist"); //获取本地存储中的购物车列表
                if(cartlist){  //如果有数据，再判断是否有当前的数据
                  if(!Storage.hasCollectData(this.userid,this.productid,cartlist)){   //没有则存入本地存储中
                      cartlist.push(newData);
                      Storage.set("cartlist",cartlist);  //重新写入
                  }
                    
                }
                else{ //如果购物车列表中没有数据
                    var lists=[];
                    lists.push(newData);
                    Storage.set("cartlist",lists);
                }
            
            }
        },
        computed:{

        },
        mounted(){
           if(JSON.parse(sessionStorage.getItem("user_info"))){  //判断是否登录，未登录则跳转到登录界面
			        
				      this.userid=JSON.parse(sessionStorage.getItem("user_info"))._id
			        
		      }
		      else{
			        alert("请先登录")
			        this.$router.push({path:'/login'})  //js路由跳转
		      }
          this.reqData(this.$route.params.id);
          this.productid=this.$route.params.id;
          var subnav = document.getElementById('subnav');
				  var list = document.getElementById('list');
				  subnav.onclick = function(){
					
					  if(list.style.display == 'block'){
						
						  list.style.display = 'none';
						
					  }else{
						
						  list.style.display = 'block'
					  }
					
		      }	

          //页面加载时就判断当前商品是否被收藏，然后加载相应图标
          var collectlist=Storage.get("collectlist");
          this.is_collect=Storage.hasCollectData(this.userid,this.productid,collectlist); 
            
        }
        
    }
</script>